<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
    <h:head>
        <title>iNET- Tiện ích văn phòng</title>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link rel="shortcut icon" href="/TienIchVanPhong/resources/images/logo.png" />
        <h:outputStylesheet library="css" name="menu.css"/>
        <h:outputStylesheet library="css" name="style.css"/>
        <h:outputStylesheet library="css" name="validationEngine.jquery.css"/>
        <h:outputStylesheet library="css" name="template.css"/>
        <h:outputScript library="js" name="query-1.8.2.min.js"/>
        <h:outputScript library="js" name="jquery.validationEngine-vi.js"/>
        <h:outputScript library="js" name="jquery.validationEngine.js"/>
        <script src="/TienIchVanPhong/resources/js/jquery-1.8.2.min.js" type="text/javascript"></script>
        <script src="/TienIchVanPhong/resources/js/jquery.validationEngine-vi.js" type="text/javascript" charset="utf-8"></script>
        <script src="/TienIchVanPhong/resources/js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
        <script>
            jQuery(document).ready(function() {
                // binds form submission and fields to the validation engine
                jQuery("#frmChange").validationEngine();

            });
        </script>
        <script>
            function hideDiv() {
                $(document).ready(function() {
                    $("div.noiteDiv").fadeTo(3000, 0, function() {
                        $("div.noiteDiv").hide();
                    });
                });
            }
        </script>
    </h:head>
    <h:body>
        <h:form id="frmChange">

            <!--Start header-->
            <ui:include src="/resources/template/header.xhtml"/>
            <!--end header-->

            <div class="main">
                <!-- Menu left-->

                <ui:include src="/resources/template/left.xhtml"/>

                <!--end menu left-->

                <!--nội dung-->
                <div class="right"> <br/>
                    <p align="center"><b>THAY ĐỔI MẬT KHẨU</b></p>
                    <div class="controll">
                        <table style="margin: 0 auto;">
                            <tr>
                                <td>
                                    <table class="tblemp">
                                        <tr>
                                            <td colspan="3">
                                                <p style="margin: 10px" align="center"><b>Tài khoản hệ thống </b></p>  
                                            </td>  

                                        </tr>    
                                        <tr>
                                            <td colspan="3">
                                                <div id="noiteDiv" class="noiteDiv" align="center" style="color: red; margin-bottom: 10px;">
                                                    <h:messages for="ms" globalOnly="true" id="ms" style="list-style: none"/>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="rowemp">Tên đăng nhập:</td>
                                            <td class="rowemp1">
                                                <h:inputText pt:readonly="true" style="background-color: #999"
                                                             value="#{userController.empLogin.acc_name }"
                                                             class="inputadd" id="txtusername" />
                                            </td>
                                            <td class="rowemp2">(*)</td>
                                        </tr>
                                        <tr>
                                            <td class="rowemp">Mật khẩu cũ:</td>
                                            <td class="rowemp1">
                                                <div id="noiteDiv" class="noiteDiv" style="color: red;">
                                                    <h:messages style="list-style: none" for="passold" id="erMsPo" globalOnly="true" errorClass="erClass"/>
                                                </div>
                                                <h:inputSecret 
                                                    
                                                    onblur="hideDiv()"
                                                    value="#{userController.emp.password}"
                                                    class="inputadd" 
                                                    id="passold" 
                                                    pt:placeholder="Mật khẩu cũ"
                                                    validatorMessage="Không đúng định dạng"
                                                    required="true" requiredMessage="Không được để trống" >
                                                    <f:validateRegex pattern="((?=.*[a-zA-Z0-9]).{6,})" ></f:validateRegex>
                                                    <f:ajax execute="@this" render="erMsPo" event="blur" listener="#{userController.checkPassword()}" ></f:ajax>
                                                </h:inputSecret>  
                                            </td>
                                            <td class="rowemp2">(*)

                                            </td>
                                        </tr> 
                                        <tr>
                                            <td class="rowemp">Mật khẩu mới:</td>
                                            <td class="rowemp1">
                                                <div id="noiteDiv" class="noiteDiv" style="color: red;">
                                                    <h:messages style="list-style: none" for="password" id="erMsPN" globalOnly="true" errorClass="erClass"/>
                                                </div>
                                                <h:inputSecret
                                                    onblur="hideDiv()"
                                                    value="#{userController.password2}"
                                                    pt:placeholder="Mật khẩu mới"
                                                    class="inputadd " id="password" 
                                                    validatorMessage="Không đúng định dạng"
                                                    required="true" requiredMessage="Không được để trống" >
                                                     <f:ajax execute="@this" render="erMsPN" event="blur" ></f:ajax>
                                                    <f:validateRegex pattern="((?=.*[a-zA-Z0-9]).{6,})" ></f:validateRegex>
                                                </h:inputSecret>
                                            </td>
                                            <td class="rowemp2">(*)</td>
                                        </tr>
                                        <tr>
                                            <td class="rowemp">Xác nhận mật khẩu mới:</td>
                                            <td class="rowemp1">
                                                <div id="noiteDiv" class="noiteDiv" style="color: red;">
                                                    <h:messages style="list-style: none" for="password2" id="erMsPN1" globalOnly="true" errorClass="erClass"/>
                                                </div>
                                                <h:inputSecret
                                                    value="#{userController.empLogin.password}"
                                                    pt:placeholder="Nhập lại mật khẩu mới"
                                                    class="inputadd" id="password2" 
                                                    validatorMessage="Không đúng định dạng"
                                                    required="true" requiredMessage="Không được để trống" >
                                                    <f:validateRegex pattern="((?=.*[a-zA-Z0-9]).{6,})" ></f:validateRegex>
                                                    <f:ajax execute="@this" render="erMsPN1" event="blur" listener="#{userController.checkSamePassword(userController.password2)}" ></f:ajax>
                                                </h:inputSecret>
                                            </td>
                                            <td class="rowemp2">(*)</td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr>                        
                                <td>
                                    <table class="tblemp1">
                                        <tr>
                                            <td></td>
                                            <td class="btnaddemp">
                                                <h:commandButton styleClass="btnSubmid" onclick="if (!confirm('Bạn muốn thay đổi?'))
                                                            return false;" action="#{userController.changePassword()}" value="Thay đổi "/>
                                                <h:commandButton styleClass="btnSubmid" value="Làm lại" type="reset"/>
                                            </td>
                                            <td></td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <br/>
                    <br/>                      
                </div>
                <!-- end dội dung-->
            </div>
            <!--Footer-->
            <ui:include src="/resources/template/footer.xhtml"/>
            <!--end footer-->

        </h:form>
    </h:body>
</html>

